<template>
  <div :class="{ hidden: !selfShow }" id="bg">
    <div
      style="
        width: 970px;
        padding-bottom: 27px;
        margin: 140px auto;
        background: #ffffff;
        border-radius: 10px;
      "
    >
      <div class="title-header">
        <span
          class="s1 el-icon-close"
          style="color: #4381e6; margin-left: 33px"
        ></span>
        <span style="color: #ffffff; font-size: 30px" class="detail-title">{{
          $t("Info.detail")
        }}</span>
        <span class="s1 el-icon-close" @click="onClose"></span>
      </div>
      <div style="margin-top: 30px">
        <div
          style="display: flex; flex-wrap: wrap; width: 800px"
          v-if="tapData.length > 1"
        >
          <span
            class="res-span"
            :class="[item.selected ? 'res-span-active' : '']"
            v-for="(item, index) in tapData"
            :key="index"
            @click="showResource(item)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div id="table" v-if="belong === 3">
        <div>
          <el-table
            :data="ResList"
            border
            style="width: 920px; margin: 30px 24px; height: 400px"
          >
            <el-table-column
              prop="sss"
              :label="$t('resourceOrder.serialNum')"
              width="180"
              header-align="center"
              align="center"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              :label="$t('resourceOrder.date')"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="orderNo"
              :label="$t('resourceOrder.orderNo')"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              class="time"
              prop="coin"
              :label="$t('resourceOrder.payAmount')"
              width="180"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope"> ￥{{ scope.row.coin }}</template>
            </el-table-column>
            <el-table-column
              :label="$t('Info.operate')"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="normal"
                  style="padding: 5px"
                  @click="load(scope.row.status, scope.row.orderNo)"
                  >{{ $t("resourceOrder.viewOrder") }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
          "
        >
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange(page1)"
              :current-page.sync="page1"
              layout="prev,pager,next"
              :page-size="pageSize"
              :total="resTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div v-if="belong === 4">
        <div style="height: 430px">
          <el-table
            :data="myList"
            border
            style="width: 920px; margin: 30px 24px"
          >
            <el-table-column
              :label="$t('resourceOrder.serialNum')"
              width="180"
              header-align="center"
              align="center"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              :label="$t('resourceOrder.date')"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="rechargeWay"
              :label="$t('resourceOrder.recharge')"
              width="180"
              header-align="center"
              align="center"
              :formatter="getChannel"
            ></el-table-column>
            <el-table-column
              class="time"
              prop="orderNo"
              :label="$t('resourceOrder.billNo')"
              width="229"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              class="time"
              prop="coin"
              :label="$t('resourceOrder.rechargeAmount')"
              width="150"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                ￥ {{ scope.row.coin }}</template
              ></el-table-column
            >
          </el-table>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
          "
        >
          <div class="block">
            <el-pagination
              @current-change="change(page2)"
              :current-page.sync="page2"
              layout="prev,pager,next"
              :page-size="pageSize"
              :total="mytotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div v-if="belong === 2">
        <div>
          <el-table
            :data="myCustomList"
            border
            style="width: 920px; margin: 30px 24px; height: 400px"
          >
            <el-table-column
              label="序号"
              width="180"
              header-align="center"
              align="center"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="时间"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="resourceName"
              label="资源名称"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="resourceNo"
              label="资源编号"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              class="time"
              prop="coin"
              label="营收金额"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                ￥{{ scope.row.coin }}</template
              ></el-table-column
            >
          </el-table>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
          "
        >
          <div class="block">
            <el-pagination
              @current-change="customChange(page5)"
              :current-page.sync="page5"
              layout="prev,pager,next"
              :page-size="pageSize"
              :total="myCustomTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div v-if="belong === 1">
        <div>
          <el-table
            :data="myCustomList"
            border
            style="width: 920px; margin: 30px 24px; height: 400px"
          >
            <el-table-column
              prop="sss"
              :label="$t('resourceOrder.serialNum')"
              width="180"
              header-align="center"
              align="center"
              type="index"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              :label="$t('resourceOrder.date')"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="orderNo"
              :label="$t('resourceOrder.orderNo')"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              class="time"
              prop="payAmount"
              :label="$t('resourceOrder.payAmount')"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              :label="$t('Info.operate')"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="normal"
                  style="padding: 5px"
                  @click="loadCustom(scope.row.status, scope.row.orderNo)"
                  >{{ $t("resourceOrder.viewOrder") }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
          "
        >
          <div class="block">
            <el-pagination
              @current-change="customChange(page5)"
              :current-page.sync="page5"
              layout="prev,pager,next"
              :page-size="pageSize"
              :total="myCustomTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <SlotOrder
      :loadData="loadData"
      :totalAmount="totalAmount"
      :resourceTotal="resourceTotal"
      :showCommonText="showCommonText"
      :showThirdText="showThirdText"
      :showCustomText="showCustomText"
    ></SlotOrder>
    <CustomDetail></CustomDetail>
  </div>
</template>

<script>
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import util from "../../common/util";
import SlotOrder from "./SlotOrder";
import CustomDetail from "../custom/CustomDetail";
import encryption from "../../common/encryption";

let userId;
let pressId;
let orderType;

export default {
  name: "DetailSlot",
  props: ["total", "pageSize"],
  components: { SlotOrder, CustomDetail },
  data() {
    return {
      selfShow: false,
      mytotal: 0,
      myList: [],
      ResList: [],
      loadData: null,
      resourceTotal: "",
      resTotal: 0,
      myCustomList: [],
      myCustomTotal: 0,
      page1: 1,
      page2: 1,
      page5: 1,
      tapData: [],
      belong: 3,
      showCustomText: false,
      showThirdText: false,
      showCommonText: false,
      culture: "",
      selected: false,
      totalAmount: 0,
    };
  },
  created() {
    userId = this.$route.query.userId;
    pressId = this.$route.query.pressId;
    this.culture = this.$route.query.culture;
    this.tapData = [
      {
        id: 3,
        name: "资源购买明细",
        selected: true,
      },
      {
        id: 2,
        name: "资源营收明细",
        selected: false,
      },
      {
        id: 4,
        name: "充值明细",
        selected: false,
      },
    ];
    getResources(1, this);
    getDetails(1, this);
  },
  mounted() {
    let that = this;
    bus.$on("showDetail2", function () {
      that.selfShow = true;
    });
  },
  methods: {
    loadCustom(a, b) {
      bus.$emit("getCustomResource", a, b);
    },
    /**
     * 充值方式显示
     */
    getChannel(row, column) {
      if (parseInt(row.rechargeChannel) == 1) {
        return "线下";
      } else {
        return "线上";
      }
    },

    /**
     * 资源列表时间格式转换
     */
    showCustomDate() {
      for (let i = 0; i < this.myCustomList.length; i++) {
        this.myCustomList[i].createDate = util.formate(
          this.myCustomList[i].createDate
        );
      }
    },

    /**
     * 充值列表时间格式转换
     */
    detailDate() {
      for (let i = 0; i < this.myList.length; i++) {
        this.myList[i].createDate = util.formate(this.myList[i].createDate);
      }
    },

    /**
     * 图书订单详情时间格式转换
     */
    getDate() {
      this.loadData.createDate = util.formate(this.loadData.createDate);
    },

    /**
     * 图书订单列表时间格式转换
     */
    loadDate() {
      for (let i = 0; i < this.ResList.length; i++) {
        this.ResList[i].createDate = util.formate(this.ResList[i].createDate);
      }
    },

    /**
     * 资源费用虚拟价格
     */
    getData() {
      let t = 0;
      if (this.loadData.responseAreditorBookOrderDetailList !== null) {
        this.loadData.responseAreditorBookOrderDetailList.forEach((el) => {
          if (el.resourceSource !== 3) {
            t += el.resourcePrice;
          }
        });
        this.resourceTotal = t;
      }
    },

    /**
     * 关闭弹窗
     */
    onClose() {
      this.selfShow = false;
    },

    /**
     * 订单列表
     */
    showResource(item) {
      intiTapDataSelected(this, item);
      if (item.id === 3) {
        getResources(1, this);
        this.belong = 3;
      } else if (item.id === 2) {
        orderType = item.id;
        getCustom(1, this);
        this.belong = 2;
      } else if (item.id === 1) {
        orderType = item.id;
        getCustom(1, this);
        this.belong = 1;
      } else if (item.id === 4) {
        getDetails(1, this);
        this.belong = 4;
      }
    },

    /**
     *  图书订单列表分页
     */
    handleCurrentChange(val) {
      getResources(val, this);
    },

    /**
     * 充值列表分页
     */
    change(i) {
      getDetails(i, this);
    },

    /**
     * 资源订单列表分页
     */
    customChange(t) {
      getCustom(t, this);
    },

    /**
     * 打开已完成图书订单详情
     */
    load(id, id2) {
      let that = this;
      console.log(id, id2);
      console.log(that);
      bus.$emit("showClauseDetail", id, id2);

      ajax.get({
        url: api.customDetail.routeName + api.customDetail.children.detail,
        data: {
          orderNo: id2,
          pageSize: 5,
        },
        success: function (res) {
          that.loadData = JSON.parse(encryption.decryptionMxr(res));
          console.log(that.loadData);
          that.price = that.loadData.pageInfo.list;
          that.a = that.price.map((item) => Number(item.resourceTotalPrice));
          that.totalAmount = that.a.reduce((a, b) => {
            console.log(a, b);
            return a + b;
          });
          that.getDate();
        },
      });
    },
  },
};

/**
 * 分页获取资源购买明细列表数据
 */
function getResources(page1, that) {
  ajax.get({
    url: api.Info.privateRouteName + api.Info.children.purchase,
    data: {
      pageSize: 5,
      pageNo: page1,
      userId: userId,
    },
    success(res) {
      that.response = JSON.parse(encryption.decryptionMxr(res));
      that.ResList = that.response.list;
      console.log(that.response);
      that.resTotal = that.response.total;
      that.page1 = page1;
      that.loadDate();
    },
  });
}

/**
 * 分页获取充值明细列表数据
 */
function getDetails(page2, that) {
  ajax.get({
    url: api.charge.routeName + api.charge.children.detail,
    data: {
      pageNo: page2,
      pageSize: 5,
      userId: userId,
    },
    success(res) {
      that.res = JSON.parse(encryption.decryptionMxr(res));
      console.log(that.res);
      that.myList = that.res.list;
      that.mytotal = that.res.total;
      that.page2 = page2;
      that.detailDate();
    },
  });
}

/**
 * 分页获取资源营收详情
 */
function getCustom(page5, that) {
  ajax.get({
    url: api.Info.privateRouteName + api.Info.children.profit,
    data: {
      userId: userId,
      pageNo: page5,
      pageSize: 5,
    },
    success(res) {
      that.myCustomList1 = JSON.parse(encryption.decryptionMxr(res));
      that.myCustomList = JSON.parse(encryption.decryptionMxr(res)).list;
      console.log(that.myCustomList1);
      console.log(that.myCustomList);
      that.myCustomTotal = that.myCustomList1.total;
      that.page5 = page5;
      that.showCustomDate();
    },
  });
}

/**
 * 订单列表tap选中
 */
function intiTapDataSelected(that, item) {
  that.tapData.forEach((e) => {
    e.selected = false;
  });

  item.selected = true;
}
</script>

<style scoped>
.detail-title {
  font-size: 20px;
  letter-spacing: 3px;
}

.s1 {
  font-size: 26px;
  color: white;
  margin-top: 5px;
  margin-right: 30px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

#s1,
#s2,
#s3,
#s6 {
  font-size: 16px;
  font-weight: bolder;
  color: #9c9c9c;
}

#s1 {
  margin-left: 23px;
  color: black;
}

#s2,
#s3,
#s6 {
  margin-left: 25px;
}

#s1:hover,
#s3:hover,
#s6:hover {
  cursor: pointer;
}

#s2:hover {
  cursor: pointer;
}

.res-span {
  font-size: 16px;
  font-weight: bolder;
  color: #9c9c9c;
  margin-left: 25px;
}

.res-span:hover {
  cursor: pointer;
}

.res-span-active {
  color: black;
}

.title-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}
</style>
